<script setup lang="ts">
import { ref, onMounted } from 'vue';
import List from './components/List.vue'
import axios from 'axios'
import { ChannelResData, ChannelItem } from './types/data'

const list = ref<ChannelItem[]>([])

// 外面没有函数包裹，没有 async 标记，为什么 await 不报错呢？
// 因为在 setup 语法糖环境下 可以直接写 await
// 虽然可以直接写 await，但是会导致页面渲染失败
// const res = await axios<ChannelResData>({
//   method: 'GET',
//   url: 'http://geek.itheima.net/v1_0/channels'
// })
// console.log('[ res ] >', res)
// list.value = res.data.data.channels

onMounted(async () => {
  const res = await axios<ChannelResData>({
    method: 'GET',
    url: 'http://geek.itheima.net/v1_0/channels'
  })
  console.log('[ res ] >', res)
  list.value = res.data.data.channels
})

</script>

<template>
    <!-- tab切换 -->
    <van-tabs>
      <van-tab v-for="v of list" :key="v.id" :title="v.name">
        <!-- tab 组件和 element-ui 中的 dialog 和 抽屉 组件的机制类似：懒渲染 & 缓存 -->
        <!-- 文章列表组件 -->
        <!-- 有多少个 List 组件实例呢？上面的 van-tab 循环多少次，就有多少个 -->
        <!-- 提示：各个 List 组件实例中的数据是互相独立的 -->
        <List :channel_id="v.id" />
      </van-tab>
      <!-- <van-tab title="数据库">数据库</van-tab>
      <van-tab title="区块链">区块链</van-tab>
      <van-tab title="Go">Go</van-tab>
      <van-tab title="产品">产品</van-tab>
      <van-tab title="资讯">资讯</van-tab> -->
    </van-tabs>
</template>


